<template>
  <scroll-view class="list-scroll-content wh_auto" scroll-y @scrolltolower="getDataList">
    <slot name="title"></slot>
    <template v-if="props.scrollData.isForEachVail === true">
      <view v-for="(item, index) in dataList" :key="index">
        <slot :row="item"></slot>
      </view>
    </template>
    <template v-else>
      <slot></slot>
    </template>
    <view v-if="stateData.status === 'noMore'" class="scroll_bottom_text">
      <view v-if="dataList.length == 0" style="margin-top: 240rpx">暂无数据</view>
    </view>
    <uni-load-more :status="stateData.status" style="padding-bottom: 10px"></uni-load-more>
  </scroll-view>
</template>

<script setup lang="ts">
import { IScrollViewInterface, IScrollViewStateInterface, PageInfoInterface } from '#/container/IScrollViewInterface';
import { hideLoading, showLoading } from '@/utils/sysMsg';
import { onMounted, PropType, ref } from 'vue';
const props = defineProps({
  scrollData: {
    type: Object as PropType<IScrollViewInterface>, // 明确类型为 string
    required: true
  }
});
const stateData = ref<IScrollViewStateInterface>({ status: 'more', finished: false });
const pageInfo = ref<PageInfoInterface>({ current: 1, size: 10 });
const dataList = ref<any>([]); // 数据值
const getDataList = async () => {
  if (stateData.value.finished == false) {
    showLoading('加载中');
    stateData.value.status = 'loading';
    const result = await props.scrollData.callback({
      ...pageInfo.value,
      ...(props.scrollData.searchForm || {})
    });
    stateData.value.finished = false;
    stateData.value.status = 'more';
    if (result) {
      pageInfo.value.current++;
      result.data.records.forEach((item: any) => dataList.value.push(item));
      emit('selectDataList', dataList.value, result.data.records);
      if (result.data.records.length < pageInfo.value.size) {
        stateData.value.finished = true;
        stateData.value.status = 'noMore';
      }
    }
    hideLoading();
  }
};
const init = () => {
  pageInfo.value = props.scrollData.pageInfo || { current: 1, size: 10 };
  stateData.value = { status: 'more', finished: false };
  dataList.value = [];
  getDataList();
};
onMounted(() => {
  if (props.scrollData.isAutoSelect != false) {
    init();
  }
});

const emit = defineEmits(['selectDataList']);
</script>

<style scoped>
.home_main {
  margin: 0 10px;
}
</style>
